<template>
	<view class="container-app">
		<uni-card class="bill-list" v-for="item in billList">
			<view>订单号: {{item.id}}</view>
			<view>缴费时间: {{item.collectionTime}}</view>
			<view class="bill-status">
				<view class="bill-status-text">账单状态: </view>
				<uni-tag v-if="item.status === '已支付' " inverted=true :text="item.status" size="small" type="success" />
				<uni-tag v-if="item.status === '未支付' " inverted=true :text="item.status" size="small" type="warning" />
				<uni-tag v-if="item.status === '逾期' " inverted=true :text="item.status" size="small" type="error" />
			</view>
			<view class="pay-box">
				<view>实支付金额: {{item.totalAmount}}￥</view>
				<button type="primary" size="mini" @click="topay(item.id)">去支付</button>
			</view>
		</uni-card>
	</view>
</template>

<script>
	import { getBillPageApl } from '@/api/bill/bill.js'
	
	export default {
		data() {
			return {
				pageFrom: {
					pageNum: 1,
					pageSize: 10
				},
				billList: [],
			}
		},

		onLoad() {
			this.getBillpage();
		},

		onPullDownRefresh() {
			this.getBillpage();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},

		methods: {
			getBillpage() {
				getBillPageApl(this.pageFrom).then(res => {
					this.billList = res.rows
				})
			},

			topay(id) {
				uni.navigateTo({
					url: '/pages/order/order?id=' + id
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.container-app {}

	.bill-list {

		.bill-status {
			display: flex;
			flex-direction: row;
			align-items: center;

			.bill-status-text {
				margin-right: 20rpx;
			}
		}

		.pay-box {
			display: flex;
			flex-direction: row;
			align-items: center;
		}
	}
</style>